<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据</title>
	</head>
	<body>
		<div id="app">
			<!-- 定义表单 -->
			<form action="http://www.baidu.com" >
			用户名:<input type="text" v-model="user.username" /><br />
			用户详情:<textarea v-model ="user.info"></textarea>
			<!-- 定义下拉框 -->
			<select name="book" v-model="user.book">
				<option value="java基础">java编程基础</option>
				<option value="疯狂java讲义">疯狂</option>
				<option value="java技术卷">默认的技术卷</option>
			</select>
			<hr />
			<!-- 单选框练习 -->
			性别:<input type="radio" value="男" name="gender" v-model="user.gender"/>男
				<input type="radio" value="女" name ="gender" v-model="user.gender"/>女
				<input type="submit" value="提交" @click.prevent ="addForm"/>
				<hr />
				<!-- 复选框练习,hobby用数组接 -->
				<input type="checkbox" name="hobby" value= "吃" v-model="user.hobby"/>吃饭
				<input type="checkbox" name="hobby" value="喝" v-model="user.hobby"/>喝水
			</form>
		
		</div>
		<script src="../js/vue.js">
	
		</script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					user:{
						username: "",
						info: "",
						book:"java技术卷",
						gender:"女",
						hobby:["吃","喝"]
					}
				},
				methods:{
					addForm(){
						console.log("input标签"+this.user.username)
						console.log("input标签"+this.user.info)
					}
				}
			})
			
		</script>
	</body>
</html>
